<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>员工岗位分布</span>
                    </div>
                    <el-row>
                        <el-col :span="8">
                            <div
                                id="lbsChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                        <el-col :span="8">
                            <div
                                id="lbsLineChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                        <el-col :span="8">
                            <div
                                id="lbsRadarChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>员工状态分布</span>
                    </div>
                    <el-row>
                        <el-col :span="8">
                            <div
                                id="ztsChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                        <el-col :span="8">
                            <div
                                id="ztsLineChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                        <el-col :span="8">
                            <div
                                id="ztsRadarChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 20px">
            <el-col :span="24">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>员工学历分布</span>
                    </div>
                    <el-row>
                        <el-col :span="8">
                            <div
                                id="xlsChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                        <el-col :span="8">
                            <div
                                id="xlsLineChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                        <el-col :span="8">
                            <div
                                id="xlsRadarChart"
                                style="width: 100%; height: 300px"
                            ></div>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from "echarts";
import { getStaffStatistics } from "@/api/statisticalAnalysis";

export default {
    name: "StatisticalAnalysis",
    data() {
        return {
            lbsChart: null,
            lbsLineChart: null,
            lbsRadarChart: null,
            ztsChart: null,
            ztsLineChart: null,
            ztsRadarChart: null,
            xlsChart: null,
            xlsLineChart: null,
            xlsRadarChart: null,
            deptChart: null,
            loading: false,
        };
    },
    mounted() {
        this.initCharts();
        this.getStatisticsData();
    },
    beforeDestroy() {
        if (this.lbsChart) {
            this.lbsChart.dispose();
        }
        if (this.lbsLineChart) {
            this.lbsLineChart.dispose();
        }
        if (this.lbsRadarChart) {
            this.lbsRadarChart.dispose();
        }
        if (this.ztsChart) {
            this.ztsChart.dispose();
        }
        if (this.ztsLineChart) {
            this.ztsLineChart.dispose();
        }
        if (this.ztsRadarChart) {
            this.ztsRadarChart.dispose();
        }
        if (this.xlsChart) {
            this.xlsChart.dispose();
        }
        if (this.xlsLineChart) {
            this.xlsLineChart.dispose();
        }
        if (this.xlsRadarChart) {
            this.xlsRadarChart.dispose();
        }
        if (this.deptChart) {
            this.deptChart.dispose();
        }
    },
    methods: {
        initCharts() {
            this.lbsChart = echarts.init(document.getElementById("lbsChart"));
            this.lbsLineChart = echarts.init(
                document.getElementById("lbsLineChart")
            );
            this.lbsRadarChart = echarts.init(
                document.getElementById("lbsRadarChart")
            );
            this.ztsChart = echarts.init(document.getElementById("ztsChart"));
            this.ztsLineChart = echarts.init(
                document.getElementById("ztsLineChart")
            );
            this.ztsRadarChart = echarts.init(
                document.getElementById("ztsRadarChart")
            );
            this.xlsChart = echarts.init(document.getElementById("xlsChart"));
            this.xlsLineChart = echarts.init(
                document.getElementById("xlsLineChart")
            );
            this.xlsRadarChart = echarts.init(
                document.getElementById("xlsRadarChart")
            );
        },
        getStatisticsData() {
            this.loading = true;
            getStaffStatistics().then((res) => {
                // 岗位分布图表
                this.lbsChart.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}: {c} ({d}%)",
                    },
                    series: [
                        {
                            type: "pie",
                            radius: "60%",
                            data: res.data.lbs.map((item) => ({
                                name: item.title,
                                value: item.num,
                            })),
                        },
                    ],
                });

                // 岗位分布折线图
                this.lbsLineChart.setOption({
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category",
                        data: res.data.lbs.map((item) => item.title),
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: res.data.lbs.map((item) => item.num),
                            type: "line",
                            smooth: true,
                        },
                    ],
                });

                // 岗位分布雷达图
                this.lbsRadarChart.setOption({
                    tooltip: {},
                    radar: {
                        indicator: res.data.lbs.map((item) => ({
                            name: item.title,
                            max:
                                Math.max(...res.data.lbs.map((i) => i.num)) *
                                1.2,
                        })),
                    },
                    series: [
                        {
                            type: "radar",
                            data: [
                                {
                                    value: res.data.lbs.map((item) => item.num),
                                    name: "岗位分布",
                                },
                            ],
                        },
                    ],
                });

                // 状态分布图表
                this.ztsChart.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}: {c} ({d}%)",
                    },
                    series: [
                        {
                            type: "pie",
                            radius: "60%",
                            data: res.data.zts.map((item) => ({
                                name: item.title,
                                value: item.num,
                            })),
                        },
                    ],
                });

                // 状态分布折线图
                this.ztsLineChart.setOption({
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category",
                        data: res.data.zts.map((item) => item.title),
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: res.data.zts.map((item) => item.num),
                            type: "line",
                            smooth: true,
                        },
                    ],
                });

                // 状态分布雷达图
                this.ztsRadarChart.setOption({
                    tooltip: {},
                    radar: {
                        indicator: res.data.zts.map((item) => ({
                            name: item.title,
                            max:
                                Math.max(...res.data.zts.map((i) => i.num)) *
                                1.2,
                        })),
                    },
                    series: [
                        {
                            type: "radar",
                            data: [
                                {
                                    value: res.data.zts.map((item) => item.num),
                                    name: "状态分布",
                                },
                            ],
                        },
                    ],
                });

                // 学历分布图表
                this.xlsChart.setOption({
                    tooltip: {
                        trigger: "item",
                        formatter: "{b}: {c} ({d}%)",
                    },
                    series: [
                        {
                            type: "pie",
                            radius: "60%",
                            data: res.data.xls.map((item) => ({
                                name: item.title,
                                value: item.num,
                            })),
                        },
                    ],
                });

                // 学历分布折线图
                this.xlsLineChart.setOption({
                    tooltip: {
                        trigger: "axis",
                    },
                    xAxis: {
                        type: "category",
                        data: res.data.xls.map((item) => item.title),
                    },
                    yAxis: {
                        type: "value",
                    },
                    series: [
                        {
                            data: res.data.xls.map((item) => item.num),
                            type: "line",
                            smooth: true,
                        },
                    ],
                });

                // 学历分布雷达图
                this.xlsRadarChart.setOption({
                    tooltip: {},
                    radar: {
                        indicator: res.data.xls.map((item) => ({
                            name: item.title,
                            max:
                                Math.max(...res.data.xls.map((i) => i.num)) *
                                1.2,
                        })),
                    },
                    series: [
                        {
                            type: "radar",
                            data: [
                                {
                                    value: res.data.xls.map((item) => item.num),
                                    name: "学历分布",
                                },
                            ],
                        },
                    ],
                });

                this.loading = false;
            });
        },
    },
};
</script>

<style scoped>
.app-container {
    padding: 20px;
}
.box-card {
    margin-bottom: 20px;
}
</style>
